<template>
  <a-layout-sider breakpoint="lg" v-model="collapsed">

    <div class="logo">
      <div v-if="collapsed">
        <img src="https://s1.ax1x.com/2020/10/11/0cZtZ6.jpg" alt="" style="width: 48px;height: 48px;border-radius: 50%;">
      </div>
      <div v-else>
        <span>{{collapsed ? "EasyBlog" : "EasyBlog 的个人博客"}}</span>
      </div>
    </div>

    <a-menu theme="dark" mode="inline" @click="goToPage">
      <a-menu-item key="index">
        <a-icon type="dashboard" /><span>仪表盘</span>
      </a-menu-item>
      <!-- 文章管理 -->
      <a-sub-menu>
        <span slot="title">
          <a-icon type="file" /><span>文章管理</span>
        </span>
        <a-menu-item key="addarticle">
          <a-icon type="form" /><span>写文章</span>
        </a-menu-item>
        <a-menu-item key="articlelist">
          <a-icon type="snippets" /><span>文章</span>
        </a-menu-item>
      </a-sub-menu>
      <!-- 分类管理 -->
      <a-menu-item key="categorylist">
        <a-icon type="unordered-list" /><span>分类</span>
      </a-menu-item>
      <!-- 标签管理 -->
      <a-menu-item key="tagslist">
        <a-icon type="tag" /><span>标签</span>
      </a-menu-item>
      <a-menu-item key="friendlinklist">
        <a-icon type="link" /><span>友情链接</span>
      </a-menu-item>
    </a-menu>
  </a-layout-sider>
</template>

<script>
export default {
  data () {
    return {
      collapsed: false
    }
  },
  created () {

  },
  mounted () {

  },
  // 方法集
  methods: {
    goToPage (item) {
      this.$router.push('/admin/' + item.key).catch((err) => err)
    }
  }
}
</script>

<style scoped>
  .logo {
    height: 48px;
    margin: 16px;
    color: #ffd04b;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
  }
</style>
